<template>
	<view class="review-container">

		<!-- 订单信息 -->
		<view class="order-info">
			<view class="order-header">
				<text class="order-label">订单号：</text>
				<text class="order-value">{{ orderData.orderId || orderId }}</text>
			</view>
			<view class="order-header">
				<text class="order-label">商品名：</text>
				<text class="order-value">{{ orderData.orderProductList[0].productName  }}</text>
			</view>
		</view>

		<!-- 商品信息 -->
		<view class="product-info" v-if="orderData.orderProductList && orderData.orderProductList[0]">
			<image class="product-image" :src="orderData.orderProductList[0].productImage" mode="aspectFill" />
			<view class="product-details">
				<text class="product-name">{{ orderData.orderProductList[0].productName }}</text>
				<text class="product-price">¥{{ orderData.orderProductList[0].productPrice || orderData.orderAmount }}</text>
			</view>
		</view>

		<!-- 评价表单 -->
		<view class="review-form">
			<!-- 评分 -->
			<view class="rating-section">
				<text class="section-title">商品评分</text>
				<view class="rating-stars">
					<view 
						v-for="(star, index) in 5" 
						:key="index"
						class="star-item"
						@click="setRating(index + 1)"
					>
						<text class="star-icon" :class="{ 'active': index < rating }">★</text>
					</view>
				</view>
				<text class="rating-text">{{ ratingText }}</text>
			</view>

			<!-- 评价内容 -->
			<view class="content-section">
				<text class="section-title">评价内容</text>
				<textarea 
					class="review-textarea" 
					v-model="reviewContent"
					placeholder="请分享您的使用体验，帮助其他买家做出选择..."
					maxlength="500"
					:show-confirm-bar="false"
				></textarea>
				<text class="char-count">{{ reviewContent.length }}/500</text>
			</view>

			<!-- 图片上传 -->
			<view class="image-section">
				<text class="section-title">上传图片（可选）</text>
				<view class="image-upload">
					<view 
						v-for="(image, index) in uploadedImages" 
						:key="index"
						class="image-item"
					>
						<image :src="image" mode="aspectFill" class="uploaded-image" />
						<view class="delete-btn" @click="deleteImage(index)">×</view>
					</view>
					<view 
						v-if="uploadedImages.length < 6" 
						class="upload-btn"
						@click="chooseImage"
					>
						<text class="upload-icon">+</text>
						<text class="upload-text">添加图片</text>
					</view>
				</view>
				<text class="image-tip">最多上传6张图片</text>
			</view>

			<!-- 匿名评价 -->
			<view class="anonymous-section">
				<view class="checkbox-item">
					<checkbox 
						:checked="isAnonymous" 
						@change="toggleAnonymous"
						color="#f20d0d"
					/>
					<text class="checkbox-label">匿名评价</text>
				</view>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-section">
			<button 
				class="submit-btn" 
				:disabled="!canSubmit"
				@click="submitReview"
			>
				提交评价
			</button>
		</view>
	</view>
</template>

<script>
import { post } from '@/config/request.js'

export default {
	data() {
		return {
			orderId: '',
			orderData: {},
			rating: 5, // 默认5星
			reviewContent: '',
			uploadedImages: [],
			isAnonymous: false,
			submitting: false
		}
	},
	computed: {
		ratingText() {
			const texts = ['', '很差', '较差', '一般', '不错', '很好']
			return texts[this.rating] || ''
		},
		canSubmit() {
			return this.rating > 0 && this.reviewContent.trim().length > 0 && !this.submitting
		}
	},
	onLoad(options) {
		// 获取传递的参数
		if (options.orderId) {
			this.orderId = options.orderId
		}
		if (options.orderData) {
			try {
				this.orderData = JSON.parse(decodeURIComponent(options.orderData))
			} catch (error) {
				console.error('解析订单数据失败:', error)
			}
		}
		console.log('评价页面接收到的数据:', this.orderData)
	},
	methods: {
		// 设置评分
		setRating(score) {
			this.rating = score
		},

		// 选择图片
		chooseImage() {
			uni.chooseImage({
				count: 6 - this.uploadedImages.length,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.uploadedImages = [...this.uploadedImages, ...res.tempFilePaths]
				},
				fail: (error) => {
					console.error('选择图片失败:', error)
					uni.showToast({
						title: '选择图片失败',
						icon: 'none'
					})
				}
			})
		},

		// 删除图片
		deleteImage(index) {
			this.uploadedImages.splice(index, 1)
		},

		// 切换匿名评价
		toggleAnonymous(e) {
			this.isAnonymous = e.detail.value
		},

		// 提交评价
		async submitReview() {
			if (!this.canSubmit) return

			this.submitting = true

			try {
				// 构建评价数据
				const reviewData = {
					orderId: this.orderId,
					productId: this.orderData.orderProductList?.[0]?.productId || this.orderData.productId,
					rating: this.rating,
					content: this.reviewContent.trim(),
					isAnonymous: this.isAnonymous,
					images: this.uploadedImages
				}

				console.log('提交评价数据:', reviewData)

				// 调用评价API
				const res = await post('/reviews/add', reviewData)

				if (res.code === 200) {
					uni.showToast({
						title: '评价提交成功',
						icon: 'success'
					})

					// 延迟返回上一页
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} else {
					throw new Error(res.msg || '评价提交失败')
				}
			} catch (error) {
				console.error('提交评价失败:', error)
				uni.showToast({
					title: error.message || '评价提交失败',
					icon: 'none'
				})
			} finally {
				this.submitting = false
			}
		}
	}
}
</script>

<style>
.review-container {
	padding: 20px;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.page-header {
	text-align: center;
	margin-bottom: 20px;
}

.page-title {
	font-size: 20px;
	font-weight: 600;
	color: #333;
}

.order-info {
	background-color: #fff;
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 15px;
}

.order-header {
	display: flex;
	margin-bottom: 8px;
}

.order-label {
	font-size: 14px;
	color: #666;
	width: 80px;
}

.order-value {
	font-size: 14px;
	color: #333;
	font-weight: 500;
}

.product-info {
	background-color: #fff;
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 15px;
	display: flex;
	align-items: center;
}

.product-image {
	width: 60px;
	height: 60px;
	border-radius: 8px;
	margin-right: 15px;
}

.product-details {
	flex: 1;
}

.product-name {
	font-size: 16px;
	color: #333;
	font-weight: 500;
	margin-bottom: 5px;
	display: block;
}

.product-price {
	font-size: 18px;
	color: #f20d0d;
	font-weight: 600;
}

.review-form {
	background-color: #fff;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
}

.section-title {
	font-size: 16px;
	color: #333;
	font-weight: 500;
	margin-bottom: 15px;
	display: block;
}

.rating-section {
	margin-bottom: 25px;
}

.rating-stars {
	display: flex;
	margin-bottom: 10px;
}

.star-item {
	margin-right: 10px;
}

.star-icon {
	font-size: 30px;
	color: #ddd;
	cursor: pointer;
}

.star-icon.active {
	color: #f20d0d;
}

.rating-text {
	font-size: 14px;
	color: #666;
}

.content-section {
	margin-bottom: 25px;
}

.review-textarea {
	width: 100%;
	height: 120px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 12px;
	font-size: 14px;
	color: #333;
	background-color: #fafafa;
}

.char-count {
	font-size: 12px;
	color: #999;
	text-align: right;
	margin-top: 5px;
	display: block;
}

.image-section {
	margin-bottom: 25px;
}

.image-upload {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
}

.image-item {
	position: relative;
	width: 80px;
	height: 80px;
}

.uploaded-image {
	width: 100%;
	height: 100%;
	border-radius: 8px;
}

.delete-btn {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 20px;
	height: 20px;
	background-color: #f20d0d;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	cursor: pointer;
}

.upload-btn {
	width: 80px;
	height: 80px;
	border: 2px dashed #ddd;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.upload-icon {
	font-size: 24px;
	color: #999;
	margin-bottom: 5px;
}

.upload-text {
	font-size: 12px;
	color: #999;
}

.image-tip {
	font-size: 12px;
	color: #999;
}

.anonymous-section {
	margin-bottom: 25px;
}

.checkbox-item {
	display: flex;
	align-items: center;
}

.checkbox-label {
	font-size: 14px;
	color: #333;
	margin-left: 8px;
}

.submit-section {
	padding: 0 20px;
}

.submit-btn {
	width: 100%;
	height: 50px;
	background-color: #f20d0d;
	color: #fff;
	border: none;
	border-radius: 25px;
	font-size: 16px;
	font-weight: 500;
}

.submit-btn:disabled {
	background-color: #ccc;
	color: #999;
}
</style>
